<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			body{
				background-color: #000;
			}
			#myCanvas{
				position: absolute;
				z-index: 1;
			}
			input[type="range"]{
				width: 400px;
			}
			.ui{
				display: none;
				color: #fff;
			}
			.inline{
				display: flex;
				height: 60px;
				align-items: center;
			}
			.txt{
				margin-right: 20px;
			}
			.btn-area{
				position: fixed;
				left: 0;
				top: 0;
				width: 160px;
				height: 100%;
				padding-top: 20px;
				background-color: #00000033;
				z-index: 2;
			}
			.cell{
				width: 100%;
				height: 50px;
				box-sizing: border-box;
				padding: 0 20px;
				line-height: 50px;
				color: #c5c5c5aa;
				text-align: center;
				user-select: none;
				cursor: pointer;
				transition: .3s;
			}
			
			.cell:hover{
				color: #fff;
				background-color: #00000033;
			}
			.cell.act{
				color: #fff;
				background-color: #00000088;
			}
			.btn{
				border-bottom: 1px solid #ffffff55;
			}
		</style>
	</head>
	<body>
		<div id="funButtons" class="btn-area">
			<div class="cell act"><div data-index="0" class="btn">mode 1</div></div>
			<div class="cell"><div data-index="1" class="btn">mode 2</div></div>
			<div class="cell"><div data-index="2" class="btn">mode 3</div></div>
			<div class="cell"><div data-index="3" class="btn">mode 4</div></div>
			<div class="cell"><div data-index="4" class="btn">mode 5</div></div>
			<div class="cell"><div data-index="5" class="btn">test mode 6</div></div>
		</div>
		<canvas id="myCanvas" width="800" height="800"></canvas>
		<script type="text/javascript" src="tCanvas.js"></script>
		<script type="text/javascript">
			Particle.prototype.mode6 = function(){
				document.body.style.backgroundImage = "linear-gradient(#0b1330 0,#364578 100%)"
				this.zoomQuotiety = 10
				this.dis = 3000
				// 创建粒子
				for(var i = -10; i < 10; i++){
					for(var j = -10; j < 10; j++){
						this.pList.push({
							pos: [i * 40,j * 40,0],
							phaseX: Math.PI * (i) / 10, // 粒子固有相位
							phaseY: Math.PI * (j) / 10,// 粒子固有相位
						})
					}
				}
				// 绘制
				this.cx.fillStyle = "#fff"
				this.draw(()=>{
					this.cx.translate(this.mainWidth / 2, this.mainHeight / 2)
					this.pList.forEach(p=>{
						var dX = Math.sin(p.phaseX + this.ms / 500 * this.freq)
						var dY = Math.sin(p.phaseY + this.ms / 500 * this.freq)
						dX += Math.sin(p.phaseX + this.ms / 500 * this.freq * 2) * .6
						dY += Math.sin(p.phaseY + this.ms / 500 * this.freq * 2) * .6
						var d = (dX + dY) * 20
						var p2d = this.deDiv([p.pos[0]-d*.5,p.pos[1]+d,0])
						var p2d1 = [p2d.res[0]+d,p2d.res[1]+d]
						;(p2d.mul > 0) && this.cx.fillRect(...p2d1,p2d.mul*4,p2d.mul*4)
					})
				})
			}
			var pDemo = new Particle({
				mode: 6,
			})
			function switchMode (modeIndex) {
				pDemo.destroy()
				pDemo = new Particle({
					mode: modeIndex,
					preEmit: true,
				})
			}
			funButtons.onclick = e => {
				var index = Number(e.target.dataset.index)
				var c = Array.from(e.currentTarget.children)
				c.forEach((el,i)=>{
					el.classList[i==index?'add':'remove']("act")
				})
				switchMode(index + 1)
			}
		</script>
	</body>
</html>
